<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>

	<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../../js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/bottom/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/bottom/iconfont2.css">
    <script type="text/javascript" src="../../js/jquery-2.2.3.min.js"></script>

    <style type="text/css">
    #ul_menu li{
    	display:inline-block;
    	width:21%;
    }
    #ul_menu li:first-child{
    	margin-left:5%;
    }
    #ul_menu{
    	border-top:1px solid #CCC;
    }
    #ul_menu li:last-child{
    	margin-right:5%;
    }
    #iframeUrl{
    	width:100%;
    }
    #ul_menu li{
    	height:40px;
    	margin-top:10px;
    }
    a{
    	text-decoration:none !important;
    }
    @media (min-width: 400px) {
    	#ul_menu li, #ul_menu li a, #ul_menu li a div {
	    	font-size:1.5rem;
	    }
	}
    @media (min-width: 600px) {
    	#ul_menu li, #ul_menu li a, #ul_menu li a div {
	    	font-size:3rem;
	    }
    }

.scroll-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
    </style>
</head>
<body align="center" onresize="setHeight()">
<footer>
	<div style='padding:5px;'>
		<!--主体页面-->
		<div class="scroll-wrapper">
			<iframe style='width:99%;height:90%;border:0px;padding:0px;' id="iframeUrl" src="../homepage.html"></iframe>
		</div>
		<!--菜单页面-->
		<ul id='ul_menu' style='z-index:100000000;position:fixed;bottom:0px;width:100%;background:#FFF;'>
			<li onclick="setIframeSrc('../homepage.html', '1');">
				<div class="glyphicon glyphicon-home g_style_none g_1" style='color:red;'></div>
				<div id="sy">首页</div>
			</li>
			<li onclick="setIframeSrc('../miner/miner.html', '2');">
				<div class="iconfont icon-kuangji g_style_none g_2"></div>
				<div id="kj">矿机</div>
			</li>
			<li onclick="setIframeSrc('../transaction/index.html', '3');">
				<div class="iconfont icon-qian2 g_style_none g_3"></div>
				<div id="jy">交易</div>
			</li>
			<li onclick="setIframeSrc('../userMine/userMineMain.html', '4');">
				<div class="glyphicon glyphicon-user g_style_none g_4"></div>
				<div id="wd">我的</div>
			</li>
		</ul>
	</div>
</footer>
<script>
$(".scroll-wrapper").css({"height" : $(window).height() - parseFloat($("#ul_menu").css("height").replace("px", "")) - 20 })
$(".scroll-wrapper").css({"top" : "52"})
function setIframeSrc(url, i) {
	document.getElementById("iframeUrl").src = url;
	$(".g_style_none").css({"color" : "black"});
	$(".g_" + i).css({"color" : "red"})
}
function setHeight() {
	var height = $(window).height();
	$("#iframeUrl").css({"height" : parseFloat(height) - parseFloat($("#ul_menu").css("height").replace("px", "")) - 20});
}
$(function() {
	setHeight();
})
</script>
</body>
</html>
